<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		ul {
			display: flex;
			/* width: 210px;
			flex-wrap: wrap; */
		}
		li {
			list-style: none;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: blue;
			color: #fff;
			text-align: center;
			line-height: 50px;
			margin: 10px;
			transform: translateY(0px);
		}
		.list-enter-from {
			transform: translateY(-100px);
			opacity: 0;
		}
		.list-enter-active {
			transition: all .5s;
		}
		.list-leave-to{
			transform: scale(360deg);
			opacity: 0;
		}
		.list-move {
			transition: all .5s;
		}
	</style>
	<body>
		<div id="app">
			<button @click="order(1)">升序</button>
			<button @click="order(2)">降序</button>
			<button @click="order(0)">乱序</button>
			<button @click="add(1)">添加到第一个</button>
			<button @click="add(2)">添加到末尾</button>
			<button @click="list.shift()">删除第一个</button>
			<button @click="list.pop()">删除最后一个</button>
			<button @click="list.splice(2,1)">删除第3个数字</button>
			<button @click="list.splice(list.length-3,1)">删除倒数第3个数字</button>
			<button @click="list.splice(1,4)">删除第2-5个数字</button>
			<button @click="list.splice(3,0,999)">添加到第3个后面</button>
			<button @click="list.splice(list.length-1,0,999)">添加倒数第2个数字</button>
			<transition-group name='list' tag='ul'>
				<li v-for="(i, index) in list" @dblclick="list.splice(index,1)" :key="i">{{i}}</li>
			</transition-group>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
					}
				},
				methods: {
					order(type) { //排序
						if (type == 1) {
							//升序
							this.list.sort((a, b) => a - b)
						} else if (type == 2) {
							//降序
							this.list.sort((a, b) => b - a)
						} else {
							// 乱序
							// 0 <0 >0
							// 0-1
							// (0-1)-0.5
							this.list.sort(() => Math.random() - 0.5);
						}
					},
					add(type) {
						let i = this.list.length + 1
						if (type == 1) { //添加到数组的第一位
							this.list.unshift(i)
						}else{
							this.list.push(i)
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
